/*
心得感受 渲染模板
*/
<template class="box-body">
	<view class="box">
		<!-- {{token}}/{{userCode}}
		{{experience}} -->
		<view class="father-box">
			<view class="header">
				<image class="img" :src="detailList.PhotoUrl"></image>
				<view class="auth">{{detailList.Theme}}</view>
				<view class="time">{{detailList.ShareDate}}</view>
			</view>
			<view class="MemberName">-- {{detailList.MemberName}}</view>
			<view class="content">
				<!-- <text v-html="detailList.Content"></text> -->
				<!-- #ifdef MP-WEIXIN -->
				<view v-html="detailList.Content" user-select style="text-align: left;">
				
				</view>
				<!-- #endif -->
				<!-- #ifdef H5 -->
				<text v-html="detailList.Content" user-select></text>
				<!-- #endif -->
			</view>
		</view>
	</view>

</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex';
	export default {
		onLoad(option) {
			this.experience = option;
			this.experience.id
			this.getexperienceDetail()
			// console.log(option);
		},
		computed: {
			...mapState(['token', 'userCode'])
		},
		data() {
			return {
				experience: {},
				detailList: []
			};
		},
		methods: {
			getexperienceDetail() {
				uni.showLoading();
				let url = {
					url: `/api/GetExpdetail/${this.experience.id}`
				}
				let param = {
					userCode: this.userCode,
					branchCode: this.branchCode,
					token: this.token
				}
				this.$request.httpRequest(url, param).then(e => {
					if (!e.data.Success) {
						this.reLogin();
					}
					this.detailList = e.data;
					console.log(e.data);
					uni.hideLoading();
				}).catch(e => {
					uni.hideLoading();
					console.log(e);
				})
			}
		},
		filters: {
			capitalize: function(value) {
				if (!value) return ''
				value = value.toString()
				return value.charAt(0).toUpperCase() + value.slice(1)
			}
		}

	}
</script>

<style lang="scss" scoped>
	.low {
		margin-left: 5px;
	}

	.father-box {
		background-color: #FFFFFF;
		box-shadow: #C8C7CC;
		/* height: 500upx; */
		width: 93%;
		margin: 20upx auto;
		border: 1px dashed #999999;
		border-radius: 20upx;

		.MemberName {
			// border: 1px solid red;
			text-align: right;
			font-size: $font-sm;
			margin-right: 10%;
		}
	}

	.img {
		margin: 20upx 0px 20upx 50upx;
		height: 90upx;
		width: 90upx;
		border-radius: 90upx;
		border: 1px solid #007AFF;
		display: inline-flex;
	}

	.auth {
		font-weight: bolder;
		font-family: Arial, Helvetica, sans-serif;
		font-size: 15px;
		margin-top: -100upx;
		margin-left: 170upx;
	}

	.time {
		font-family: Arial, Helvetica, sans-serif;
		font-size: 12px;
		display: inline-flex;
		margin-left: 170upx;
		margin-top: -20upx;
		color: #808080;
	}

	.leave {
		font-size: 12px;
		text-align: center;
		background: #4CD964;
		width: 75upx;
		text-align: center;
		height: 35upx;
		border-radius: 20upx;
		color: #F2F2F2;
		margin-left: 250upx;
		margin-top: -35upx;
	}

	.content {
		display: block;
		font-size: 14px;
		color: #24292E;
		// font-style: italic;
		text-align: left;
		margin-left: 60upx;
		margin-right: 60upx;
		margin-top: 18upx;
		/* height: 250upx; */
		text-indent: 1.5em;
	}

	.nbsp {
		margin-left: 25upx;
	}

	.icon-like {
		height: 32upx;
		width: 32upx;
	}

	.good {
		display: inline-flex;
		margin-top: 30upx;
		margin-left: 95upx;
	}

	.good view {
		font-size: 12px;
		margin-left: 20upx;
		color: #6D6D72;
		margin-top: -2upx;
		text-align: center;
	}

	.hr {
		width: 100%;
		margin: 25upx auto;
		margin-bottom: 0upx;
		color: #AAAAAA;
		border-color: #ececec;
		border: 0.2rpx dashed #999999;
		height: 0.2px;
	}

	.show {
		color: #0081FF;
		margin-top: 12upx;
	}

	.tag {
		font-size: 12px;
		text-align: center;
		background: #36BBFF;
		width: 120upx;
		text-align: center;
		height: 35upx;
		border-radius: 10upx;
		color: #F2F2F2;
		margin-left: 340upx;
		margin-top: -33upx;
	}
</style>
